{% extends "base.html" %}

{% block title %}{{ page_title }} - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .recharge-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .user-info-card {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .balance-display {
        background: #e9ecef;
        border-radius: 6px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .balance-item {
        text-align: center;
    }

    .balance-value {
        font-size: 1.25rem;
        font-weight: bold;
        color: #495057;
    }

    .balance-label {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .recharge-form-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 2rem;
        margin-bottom: 1.5rem;
    }

    .payment-methods {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .payment-method {
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        background: white;
    }

    .payment-method:hover {
        border-color: #007bff;
        background: #f8f9fa;
    }

    .payment-method.selected {
        border-color: #28a745;
        background: #d4edda;
    }

    .payment-icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .payment-icon.cash {
        color: #28a745;
    }

    .payment-icon.bank {
        color: #007bff;
    }

    .payment-icon.pos {
        color: #fd7e14;
    }

    .payment-icon.other {
        color: #6c757d;
    }

    .payment-name {
        font-weight: 500;
        font-size: 0.875rem;
    }

    .amount-input-section {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .amount-input {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        border: none;
        background: transparent;
        color: #495057;
        width: 100%;
    }

    .amount-input:focus {
        box-shadow: none;
        background: transparent;
        outline: none;
    }

    .amount-suggestions {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .amount-suggestion {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0.5rem;
        text-align: center;
        cursor: pointer;
        background: white;
        font-size: 0.875rem;
    }

    .amount-suggestion:hover {
        border-color: #007bff;
        background: #f8f9fa;
    }

    .amount-suggestion.selected {
        border-color: #28a745;
        background: #28a745;
        color: white;
    }

    .operator-info {
        background: #e3f2fd;
        border: 1px solid #bbdefb;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.875rem;
    }

    .calculation-preview {
        background: #e8f5e8;
        border: 1px solid #c3e6c3;
        border-radius: 6px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .calculation-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .calculation-row:last-child {
        margin-bottom: 0;
        padding-top: 0.5rem;
        border-top: 1px solid #c3e6c3;
        font-weight: bold;
    }

    .btn-recharge {
        background: #28a745;
        border: none;
        border-radius: 6px;
        padding: 0.75rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        color: white;
        width: 100%;
    }

    .btn-recharge:hover {
        background: #218838;
        color: white;
    }

    .btn-recharge:disabled {
        background: #6c757d;
        cursor: not-allowed;
    }

    @media (max-width: 768px) {
        .payment-methods {
            grid-template-columns: 1fr;
        }

        .amount-suggestions {
            grid-template-columns: repeat(3, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="recharge-container">
        <!-- 页面标题 -->
        <div class="row mb-3">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">管理首页</a></li>
                        <li class="breadcrumb-item"><a href="{{ url_for('admin_accounts.list_accounts') }}">用户账户</a></li>
                        <li class="breadcrumb-item"><a href="{{ url_for('admin_accounts.account_detail', user_id=user.id) }}">{{ user.real_name or user.username }}</a></li>
                        <li class="breadcrumb-item active">线下充值</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- 用户信息卡片 -->
        <div class="user-info-card">
            <h4 class="mb-1">{{ user.real_name or user.username }}</h4>
            <p class="mb-0 text-muted">{{ user.username }} | {{ user.phone or '未设置手机号' }}</p>

            <div class="balance-display">
                <div class="row text-center">
                    <div class="col-6">
                        <div class="balance-item">
                            <div class="balance-value">¥{{ "%.2f"|format(account_summary.balance) }}</div>
                            <div class="balance-label">当前余额</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="balance-item">
                            <div class="balance-value">¥{{ "%.2f"|format(account_summary.available_balance) }}</div>
                            <div class="balance-label">可用余额</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作员信息 -->
        <div class="operator-info">
            <strong>操作员：</strong>{{ current_user.real_name or current_user.username }} |
            <strong>操作时间：</strong>{{ now().strftime('%Y-%m-%d %H:%M:%S') }}
        </div>

        <!-- 充值表单 -->
        <div class="recharge-form-card">
            <form method="post" id="rechargeForm">
                {{ form.hidden_tag() }}

                <h5 class="mb-3">线下充值</h5>

                <!-- 充值金额 -->
                <div class="mb-3">
                    <label class="form-label">充值金额</label>
                    <div class="amount-input-section">
                        <div class="d-flex align-items-center">
                            <span style="font-size: 1.5rem; margin-right: 0.5rem;">¥</span>
                            {{ form.amount(class="amount-input", placeholder="0.00", id="amountInput") }}
                        </div>

                        <!-- 快速金额选择 -->
                        <div class="amount-suggestions">
                            <div class="amount-suggestion" data-amount="50">50</div>
                            <div class="amount-suggestion" data-amount="100">100</div>
                            <div class="amount-suggestion" data-amount="200">200</div>
                            <div class="amount-suggestion" data-amount="500">500</div>
                            <div class="amount-suggestion" data-amount="1000">1000</div>
                            <div class="amount-suggestion" data-amount="2000">2000</div>
                        </div>

                        {% if form.amount.errors %}
                            <div class="text-danger mt-2">
                                {% for error in form.amount.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- 支付方式 -->
                <div class="mb-3">
                    <label class="form-label">支付方式</label>
                    <div class="payment-methods">
                        <div class="payment-method" data-method="cash">
                            <i class="fas fa-money-bill-wave payment-icon cash"></i>
                            <div class="payment-name">现金支付</div>
                        </div>
                        <div class="payment-method" data-method="bank_transfer">
                            <i class="fas fa-university payment-icon bank"></i>
                            <div class="payment-name">银行转账</div>
                        </div>
                        <div class="payment-method" data-method="pos">
                            <i class="fas fa-credit-card payment-icon pos"></i>
                            <div class="payment-name">POS机刷卡</div>
                        </div>
                        <div class="payment-method" data-method="other">
                            <i class="fas fa-ellipsis-h payment-icon other"></i>
                            <div class="payment-name">其他方式</div>
                        </div>
                    </div>

                    {{ form.payment_method(style="display: none;", id="paymentMethodField") }}

                    {% if form.payment_method.errors %}
                        <div class="text-danger">
                            {% for error in form.payment_method.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 备注信息 -->
                <div class="mb-3">
                    <label class="form-label">备注信息</label>
                    {{ form.remarks(class="form-control", rows="2", placeholder="可填写收款凭证、转账信息等") }}
                    {% if form.remarks.errors %}
                        <div class="text-danger">
                            {% for error in form.remarks.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 充值预览 -->
                <div class="calculation-preview" id="calculationPreview" style="display: none;">
                    <h6 class="mb-2">充值预览</h6>
                    <div class="calculation-row">
                        <span>充值金额：</span>
                        <span id="previewAmount">¥0.00</span>
                    </div>
                    <div class="calculation-row">
                        <span>当前余额：</span>
                        <span>¥{{ "%.2f"|format(account_summary.balance) }}</span>
                    </div>
                    <div class="calculation-row">
                        <span>充值后余额：</span>
                        <span id="previewNewBalance">¥{{ "%.2f"|format(account_summary.balance) }}</span>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-recharge mt-3" id="submitBtn" disabled>
                    确认线下充值
                </button>
            </form>
        </div>

        <!-- 返回按钮 -->
        <div class="text-center">
            <a href="{{ url_for('admin_accounts.account_detail', user_id=user.id) }}" class="btn btn-outline-secondary">
                返回账户详情
            </a>
        </div>
    </div>
</div>

<!-- 充值确认模态框 -->
<div class="modal fade" id="rechargeConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认线下充值</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <strong>请再次确认以下信息：</strong>
                </div>

                <table class="table table-borderless">
                    <tr>
                        <td><strong>用户：</strong></td>
                        <td>{{ user.real_name or user.username }}</td>
                    </tr>
                    <tr>
                        <td><strong>充值金额：</strong></td>
                        <td class="text-primary fw-bold" id="confirmAmount">¥0.00</td>
                    </tr>
                    <tr>
                        <td><strong>支付方式：</strong></td>
                        <td id="confirmPaymentMethod">-</td>
                    </tr>
                    <tr>
                        <td><strong>操作员：</strong></td>
                        <td>{{ current_user.real_name or current_user.username }}</td>
                    </tr>
                    <tr>
                        <td><strong>充值后余额：</strong></td>
                        <td class="text-success fw-bold" id="confirmNewBalance">¥0.00</td>
                    </tr>
                </table>

                <div class="alert alert-info">
                    <strong>请确认已收到用户的实际付款！</strong>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" id="confirmSubmitBtn">确认充值</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    let selectedAmount = 0;
    let selectedPaymentMethod = '';
    const currentBalance = {{ account_summary.balance }};

    // 快速金额选择
    $('.amount-suggestion').click(function() {
        $('.amount-suggestion').removeClass('selected');
        $(this).addClass('selected');

        selectedAmount = parseFloat($(this).data('amount'));
        $('#amountInput').val(selectedAmount.toFixed(2));

        updatePreview();
        validateForm();
    });

    // 金额输入
    $('#amountInput').on('input', function() {
        const amount = parseFloat($(this).val()) || 0;
        selectedAmount = amount;

        $('.amount-suggestion').removeClass('selected');

        updatePreview();
        validateForm();
    });

    // 支付方式选择
    $('.payment-method').click(function() {
        $('.payment-method').removeClass('selected');
        $(this).addClass('selected');

        selectedPaymentMethod = $(this).data('method');
        $('#paymentMethodField').val(selectedPaymentMethod);

        validateForm();
    });

    // 表单提交
    $('#rechargeForm').submit(function(e) {
        e.preventDefault();

        if (!validateForm()) {
            return false;
        }

        showConfirmModal();
    });

    // 确认提交
    $('#confirmSubmitBtn').click(function() {
        $('#rechargeConfirmModal').modal('hide');
        document.getElementById('rechargeForm').submit();
    });

    // 更新预览
    function updatePreview() {
        if (selectedAmount > 0) {
            $('#calculationPreview').slideDown();
            $('#previewAmount').text('¥' + selectedAmount.toFixed(2));
            $('#previewNewBalance').text('¥' + (currentBalance + selectedAmount).toFixed(2));
        } else {
            $('#calculationPreview').slideUp();
        }
    }

    // 验证表单
    function validateForm() {
        const isValid = selectedAmount > 0 && selectedPaymentMethod;

        if (isValid) {
            $('#submitBtn').prop('disabled', false)
                          .text('确认线下充值 ¥' + selectedAmount.toFixed(2));
        } else {
            $('#submitBtn').prop('disabled', true)
                          .text('确认线下充值');
        }

        return isValid;
    }

    // 显示确认对话框
    function showConfirmModal() {
        const paymentMethodNames = {
            'cash': '现金支付',
            'bank_transfer': '银行转账',
            'pos': 'POS机刷卡',
            'other': '其他方式'
        };

        $('#confirmAmount').text('¥' + selectedAmount.toFixed(2));
        $('#confirmPaymentMethod').text(paymentMethodNames[selectedPaymentMethod] || selectedPaymentMethod);
        $('#confirmNewBalance').text('¥' + (currentBalance + selectedAmount).toFixed(2));

        $('#rechargeConfirmModal').modal('show');
    }

    // 金额输入格式化
    $('#amountInput').on('blur', function() {
        const value = parseFloat($(this).val());
        if (!isNaN(value) && value > 0) {
            $(this).val(value.toFixed(2));
        }
    });
});
</script>
{% endblock %}